<template>
	<!-- 轮播图 -->
	<div class="swiper swiper2">
		<ul class="swiper-wrapper">
			<li class="swiper-slide" v-for="item in imglist" :key="item.id">
				<img :src="item.src">
			</li>
		</ul>
		<div class="swiper-pagination swiper2-pagination"></div>
	</div>
</template>

<script>
	//引入vue周期函数
	import {onMounted} from 'vue';
	//引入Swiper滑动插件
	import Swiper, {Autoplay} from 'swiper';
	//应用Swiper组件配置
	Swiper.use([Autoplay]);
	export default {
		name:'Swiper2',
		props:['propswiper2'],
		data(){
			return {
				imglist:[]
			}
		},
		watch:{
			propswiper2(){
				this.imglist = this.propswiper2.Swiper2;
			}
		},
		updated(){
			new Swiper('.swiper2' , {
				//设置分页器
				pagination:{
					el : '.swiper2-pagination'
				},
				//设置播放项[时间不停止，手指经过不暂停自动]
				autoplay:{
					delay : 3000,
					stopOnLastSlide : false,
					disableOnInteraction:false,
				}
			})
		},
	}
</script>

<style scoped>
	.swiper2{
		width: 100%;
		height: 5.6rem;
		overflow: hidden;
	}
	.swiper2 img{
		width: 100%;
		height: 100%;
	}

	/* 穿透 */
	.swiper2-pagination :deep(.swiper-pagination-bullet-active){
		background-color: white;
	}
</style>
